<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"
			type="application/javascript"></script>
		<link rel="stylesheet" href="https://layui.11dz.cn/layui-v2.6.8/layui/css/layui.css">
		<script src="https://layui.11dz.cn/layui-v2.6.8/layui/layui.js"></script>
		<style>
			.layui-table td,
			.layui-table th {
				padding: 5px 15px;
				min-height: 15px;
				line-height: 15px;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>2#1楼 v22.11.19-2</legend>
			</fieldset>
			<button type="button" class="layui-btn" @click="refresh">刷新</button>
			8s自动刷新：{{autoRe?"✅":"❎"}}
			<button type="button" class="layui-btn layui-btn-sm" @click="changeRe">{{autoRe?"关闭":"开启"}}</button>
			<table class="layui-table">
				<thead>
					<tr>
						<td>类别</td>
						<td>所用寝室</td>
						<td>进入时间</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody v-for="(item,index) in info">
					<tr>
						<td>{{item['name']}}</td>
						<td>{{item['dorm']=='空'?"✅空":item['dorm']}}</td>
						<td>{{item['dorm']=="空"?"":item['inTime']}}</td>
						<td>
							<button v-if="item['dorm']==myDorm" @click="back(item.Id)"
								class="layui-btn layui-btn-sm layui-btn-normal">已归</button>
							<button v-if="item['dorm']=='空'" @click="use(item.Id)"
								class="layui-btn layui-btn-sm layui-btn-normal">使用</button>
						</td>
					</tr>
					<tr>
						<td colspan="3" align="center" style="padding: 0;">
							<table class="layui-table" style="margin: 0;">
								<thead>
									<tr>
										<td colspan="2">排队寝室</td>
									</tr>
								</thead>
								<tr>
									<td>1</td>
									<td>{{item['wait1']=='空'?"✅空":item['wait1']}}</td>
								</tr>
								<tr>
									<td>2</td>
									<td>{{item['wait2']=='空'?"✅空":item['wait2']}}</td>
								</tr>
								<tr>
									<td>3</td>
									<td>{{item['wait3']=='空'?"✅空":item['wait3']}}</td>
								</tr>
							</table>
						</td>
						<td>
							<button v-if="item['wait1']==myDorm || item['wait2']==myDorm || item['wait3']==myDorm"
								@click="quit(item.Id,index)" class="layui-btn layui-btn-sm layui-btn-normal">放弃</button>
							<button
								v-if="item['dorm']!='空' && item['dorm']!=myDorm && !(item['wait1']==myDorm || item['wait2']==myDorm || item['wait3']==myDorm)"
								@click="wait(item.Id)" class="layui-btn layui-btn-sm layui-btn-normal">排队</button>
						</td>
					</tr>
					<tr>
						<td colspan="5"><br></td>
					</tr>
				</tbody>
			</table>
			<button type="button" class="layui-btn" @click="refresh">刷新</button>
			<br>
			Fix bug：1394255600（QQ/微信）
		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					myDorm: localStorage.getItem("myDorm"),
					info: "",
					infoOld: null,
					autoRe: true,
					timer: null
				},
				methods: {
					back(id) {
						if (!localStorage.getItem("myDorm")) {
							this.bindDorm();
							return;
						}
						fetch(`http://39.107.221.29/t21/backToilet.php?id=${id}&dorm=${this.enc(this.myDorm)}`, {
							method: "GET"
						}).then((res) => {
							return res.json()
						}).then((res) => {
							layer.msg(res.code ? "成功" : "失败");
							this.refresh();
						});
					},
					use(id) {
						if (!localStorage.getItem("myDorm")) {
							this.bindDorm();
							return;
						}
						fetch(`http://39.107.221.29/t21/useToilet.php?id=${id}&dorm=${this.enc(this.myDorm)}`, {
							method: "GET"
						}).then((res) => {
							return res.json()
						}).then((res) => {
							layer.msg(res.code ? "成功" : "失败");
							this.refresh();
						});
					},
					quit(id, index) {
						layer.open({
							title: '放弃排队',
							btn: ["是的", "不是"],
							content: `你确定吗`,
							yes: () => {
								let waitNum = 0
								for (let i in this.info[index]) {
									if (i.includes("wait") && this.myDorm == this.info[index][i]) {
										waitNum = i.match(/[0-9]/)[0]
										break;
									}
								}
								if (waitNum == 0) {
									return
								}
								console.log(waitNum)
								fetch(`http://39.107.221.29/t21/quitToilet.php?id=${id}&waitNum=${waitNum}&dorm=${this.enc(this.myDorm)}`, {
									method: "GET"
								}).then((res) => {
									return res.json()
								}).then((res) => {
									layer.msg(res.code ? "成功" : "失败");
									this.refresh();
								});
							},
							btn2: function() {}
						}, );
					},
					wait(id) {
						if (!localStorage.getItem("myDorm")) {
							this.bindDorm();
							return;
						}
						fetch(`http://39.107.221.29/t21/useWait.php?id=${id}&dorm=${this.enc(this.myDorm)}`, {
							method: "GET"
						}).then((res) => {
							return res.json()
						}).then((res) => {
							layer.msg(res.code ? "成功" : "失败");
							this.refresh();
						});
					},
					refresh() {
						fetch(`http://39.107.221.29/t21/getToilet.php`, {
							method: "GET"
						}).then((res) => {
							return res.json()
						}).then((res) => {
							this.infoOld = this.info
							this.info = res.sort((a, b) => {
								return a.Id - b.Id
							})
							if (this.infoOld) {
								for (let i = 0; i < this.info.length; i++) {
									let old = this.infoOld[i],
										newi = this.info[i]
									if (old['dorm'] != newi['dorm'] && newi['dorm'] == this.myDorm) {
										// layer.open({
										// 	title: '提醒',
										// 	btn: "",
										// 	content: `${this.info[i]['name']} 已排到`,
										// })
										// this.autoRe=false
										alert(`${this.info[i]['name']} 已排到`);
										return
									}
								}
							}
							layer.msg("加载完成", {
								offset: ['20px', 'calc(50% - 53px)'],
								time: 900
							});
						});
					},
					s(hz) {
						var son1 = new AudioContext();
						var osc = son1.createOscillator()
						var g = son1.createGain()
						osc.connect(g)
						osc.type = 'sine'
						osc.frequency.value = hz
						g.connect(son1.destination)
						g.gain.value = 1
						osc.start();
						var stoptime = 0.3
						osc.stop(stoptime);
					},
					geturlparam(pr) {
						let that = this
						// window.location.href 获取地址
						let url = window.location.href
						let p = url.split('?')[1]
						let params = new URLSearchParams(p)
						return params.get(pr)
					},
					enc(str) {
						let encoded = "";
						for (i = 0; i < str.length; i++) {
							let a = str.charCodeAt(i);
							let b = a ^ 123;
							encoded = encoded + String.fromCharCode(b);
						}
						return encoded;
					},
					bindDorm() {
						layer.open({
							title: '绑定',
							btn: "",
							content: `<div class="layui-form-item">
<label class="layui-form-label">寝室号</label>
<div class="layui-input-block">
  <input type="text" name="title" required  lay-verify="required" placeholder="请输入寝室号" autocomplete="off" class="layui-input" id="myDorm">
  <button class="layui-btn" lay-submit lay-filter="formDemo" onclick="localStorage.setItem('myDorm',document.getElementById('myDorm').value);location.reload()">保存</button>
</div>
</div>`
						});
					},
					changeRe() {
						if (this.autoRe) {
							clearInterval(this.timer)
							this.autoRe = false
						} else {
							this.autoRefreshCreate()
							this.autoRe = true
						}
					},
					autoRefreshCreate() {
						this.timer = setInterval(this.refresh, 20000)
					}

				},
				created() {
					this.refresh()
					String.prototype.enc = function() {
						let bytes = [];
						for (let i = 0; i < this.length; i++) {
							bytes.push(this.charCodeAt(i * 2 + 3));
						}
						return bytes.join(',');
					}
					this.autoRefreshCreate()
				},
			});
		</script>
	</body>

</html>
